<template>
  <div class="set-back" v-bind:style="{height:this.windowHeight+'px'}">
   <div class="login-layout">
     <!-- 登陆div -->
       <div class="form-div">
         <!-- 登陆界面的logo -->
         <p style="text-align: center;margin: 10px 0;">
           <img src="../../../static/logo.fe46111.fe46111.png" style="width: 50%;"/>
         </p>

         <!-- from表单数据   登陆 -->
         <form>
           <p class="from-font-style">邮箱</p>
           <el-input v-model="user.email" placeholder="请输入邮箱"></el-input>
           <p class="from-font-style">密码</p>
           <el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
           <el-checkbox v-model="checked" :style="{marginTop:10+'px'}">记住密码?</el-checkbox>
           <el-button type="primary" @click="ClickLogin">登陆</el-button>
         </form>
       </div>
          <!-- 分割线 -->
         <el-divider></el-divider>
         <!-- 注册 忘记密码链接-->
         <p class="from-link">
           <!-- 注册账户跳转 -->
           <a>
             <router-link to="/user/register">没有账户?</router-link>
           </a>
           <!-- 忘记密码跳转 -->
           <a>
            <router-link to="/user/backPass">忘记密码?</router-link>
           </a>
           <!-- 回到主页 -->
           <a>
            <router-link to="/" >返回主页</router-link>
           </a>
         </p>
      </div>
  </div>
</template>

<script>
  import mixins from '@/mixins.js'
  import UserApi from '@/api/user.js'
  import Validate from '@/utils/validate.js'
  export default {
    mixins:[mixins],
    data() {
      return {
        // 创建对象拿来存放 账号密码
        user:{
          email:'',
          password:'',
        },
        // 判断是否账号密码正确
        isTrue:false,
        activeName: 'second',
        windowHeight:0,
        checked:true,
        // 接口API地址
        BASE_API: process.env.BASE_API,
      };
    },
    methods: {
        // 登陆功能
      ClickLogin(){
        let _this=this;
        // 判断账号密码是否为空
        if(_this.user.email==='' || _this.user.password===''){
          // 账号密码不能为空
          _this.$message({
            showClose: true,
            message:"账号或密码不能为空",
            type:'error',
             center: true
          })
        }else if(!Validate.validateEmail(_this.user.email)){   //调用正则表达式进行邮箱格式验证
          _this.$message({
            showClose: true,
            message:"请输入正确的邮箱",
            type:'error',
             center: true
          })
        }else{
          // 滑块验证码
          let captchaId = "2071119379"; //腾讯滑块验证码appid
          //生成一个滑块验证码对象
          var captcha = new TencentCaptcha(captchaId, function(res) {
            // 滑块验证正确
             if (res.ret === 0) {
                // 请求数据
                UserApi.userLogin(_this.user.email,_this.user.password).then(respose =>{
                    //isSuccess 代表账号密码正确
                   if(respose.data.isSuccess){
                     //这里获取到后端传来的token,拿到store里面进行保存在localStorage
                     //mixins 封装的store里面的方法 更新token
                     _this.LoginChangeToken(respose.data.UserInfo.token)
                     //mixins 封装的store里面的方法 更新userInfo
                     _this.AddUserCenterInfo(respose.data.UserInfo)
                     _this.$message({
                       showClose: true,
                       message:respose.data.info,
                       type:'success',
                       center: true
                     })
                     // 登陆成功跳转到首页
                     _this.$router.push({
                       path:'/',
                     })
                     //全体刷新
                     _this.$router.go(0)
                   }else{
                     //此时登陆失败  不会返回token  代表未登陆 所以应该去除localStorage里面的token
                     localStorage.removeItem("Authorization")
                     _this.$message({
                       showClose: true,
                       message:respose.data.info,
                       type:'error',
                       center: true
                     })
                   }
                })
              }
            });
          // 滑块显示
          captcha.show();

        }
      }
    },
    created() {
        // 获取window.innerHeight ：浏览器内页面可用高度
        this.windowHeight=window.innerHeight;
    }

  };
</script>

<style scoped="scoped">
  /*背景模糊*/
  .set-back{
      width:100%;
      height:100%;
      position: relative;
      background-size: 100% 100%;
      background-image: url(../../../static/1.jpg);
      padding:1px;
      box-sizing:border-box;
      z-index:1;
  }
  .set-back:after{
      content: "";
      width:100%;
      height:100%;
      position: absolute;
      left:0;
      top:0;
      background: inherit;
      filter: blur(4px);
      z-index: 2;
  }
  .login-layout{
      /* width: 40%; */
      width: 450px;
      /* margin:0 auto; */
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index:11;
      background: inherit;
      opacity: 0.8;
      box-shadow:  0 0 10px 6px rgba(0,0,0,0.7);
  }

  .el-button{
    position: relative;
    width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, 50%);
  }
  .form-div{
    height: auto;
    padding: 40px;
    color: white;
  }

  .from-font-style{
    margin: 16px 0 8px;
    font-size: 16px;
  }
  .from-link{
/*    width: 100%;
    text-align: center; */
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  .from-link a{
    color: #DCDFE6;
    font-size: 14px;
    margin: 0 5px;
  }
</style>
